<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-row>
        <el-col :span="21">
          <i class="el-icon-search"></i>
          <span class="search-title">筛选搜索</span>
        </el-col>
        <el-col :span="3" style="display: flex;justify-content: end">
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        </el-col>
      </el-row>
      <el-form :model="body" ref="queryForm" :inline="true" size="small" label-width="140px">
        <el-form-item label="用户名称:" prop="userName">
          <el-input v-model="body.userName" placeholder="请输入用户名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号码:" prop="phone">
          <el-input v-model="body.phone" placeholder="请输入用户手机号" clearable></el-input>
        </el-form-item>
        <el-form-item label="任务类别:" prop="taskCategoryId">
          <el-select v-model="body.taskCategoryId" clearable placeholder="请选择">
            <el-option v-for="item in taskCategoryOption" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态:" prop="status">
          <el-select v-model="body.status" clearable placeholder="请选择">
            <el-option v-for="item in orderOption" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域编码:" prop="regionCode">
          <el-input v-model="body.regionCode" placeholder="请输入区域编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="创建时间:" prop="orderTime">
          <el-date-picker v-model="body.orderTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime" @clear="clearTime">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <i class="el-icon-tickets"></i>
      <span style="padding-left: 6px;">数据列表</span>
    </el-card>
    <!-- 表格 -->
    <order-table title="订单列表" :queryParams="queryParams" :orderContent="orderList"></order-table>
    <!-- 分页器 -->
    <pagination v-show="true" :total="total" @pagination="handlePagination" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" />
  </div>
</template>
<script>
import OrderTable from '@/components/OrderTable/index'
import { getOrderListApi } from '@/api/order/orderlist'
import { getOrder } from "@/utils/transform/transform"
export default {
  name: "OrderList",
  components: { OrderTable },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,

      },
      body: {
        regionCode: "",
        userName: "",
        phone: "",
        taskCategoryId: "",
        status: "",
        startCreateTime: "",
        endCreateTime: ""
      },
      orderOption: [
        {
          id: 1,
          value: "待支付"
        },
        {
          id: 2,
          value: "待接单"
        },
        {
          id: 3,
          value: "待完成"
        },
        {
          id: 4,
          value: "已完成"
        },
        {
          id: 5,
          value: "已取消"
        }
      ],
      taskCategoryOption: [
        {
          id: 1,
          value: "邻里互助"
        },
        {
          id: 2,
          value: "快递服务"
        },
        {
          id: 3,
          value: "宠物服务"
        },
        {
          id: 4,
          value: "游戏开黑"
        },
        {
          id: 5,
          value: "代扔垃圾"
        },
        {
          id: 6,
          value: "商品代买"
        },
        {
          id: 7,
          value: "帮晒被子"
        },
        {
          id: 8,
          value: "地铁接送"
        },
      ],
      orderList: [],
      total: 0
    }
  },
  computed: {
    // 计算请求体，动态生成请求的body对象
    requestBody() {
      return Object.fromEntries(
        Object.entries(this.body).filter(
          ([_, value]) => value !== null && value !== ''
        )
      );
    }
  },
  methods: {
    // 获取列表
    async getOrderList() {
      const res = await getOrderListApi(this.queryParams, this.requestBody)
      this.orderList = getOrder(res.rows)
      this.total = res.total
    },
    // 查询按钮操作
    handleQuery() {
      this.getOrderList()
    },
    // 重置按钮操作
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 切换分页操作
    handlePagination({ page, limit }) {
      this.queryParams = {
        ...this.queryParams,
        pageNum: page,
        pageSize: limit
      }
      this.getOrderList()
    },
    changeTime(val) {
      // 检查val是否为null或者是有效的数组
      if (Array.isArray(val) && val.length === 2) {
        this.body.startCreateTime = val[0];
        this.body.endCreateTime = val[1];
      } else {
        // 如果val为null，清空时间
        this.clearTime()
      }
    },
    clearTime() {
      this.body.startCreateTime = '';
      this.body.endCreateTime = '';
    }
  },
  mounted() {
    this.getOrderList()
  },
}
</script>
<style lang="scss" scoped></style>